<template>
  <div id="index">
    <div class="index_body">
      <indexlayer></indexlayer>
      <div class="jgx_line clearfix">
        <div class="cc fl">
          <img src="../../public/images/cc.png" alt="">
          <p>数控立式车床VTL1200ATC</p>
          <ul class="clearfix">
            <li class="fl process_state2" style="border-right: none;"><a href="javascript:;" @click="changeTab('50 — 车基准', 50, 0)">50</a></li>
            <li class="fl" :class="toptab==60 ? 'toptabchoose' : ''"><a href="javascript:;" @click="changeTab('60 — 精车小端', 60, 0)">60</a></li>
          </ul>
        </div>
        <div class="line fl ml16 mt120"><el-icon><CaretRight /></el-icon></div>
        <div class="wz fr">
          <img src="../../public/images/wz.png" alt="" :class="getBgClass(1)">
          <p :class="getBgClass(1)">五坐标加工中心STC1000</p>
          <ul class="clearfix" style="width: 56px;">
            <li class="fl" :class="getBgClass(1)"><a href="javascript:;" @click="changeTab('55 — 铣叶形', 55, 0)">55</a></li>
          </ul>
        </div>
      </div>
      <!-- board -->
      <div class="bottom_board bg_color_rgb04">
        <h4 class="">
          <template v-if="bottomtitle!==''">
            <span class="fl pl16 pr16" @click="indexlayervisible=true">{{bottomtitle}}</span>
            <ul class="fl">
              <li class="fl" :class="bottomtab==0 ? 'li_choose' : ''" @click="bottomChange(0)"><a href="javascript:;">人</a></li>
              <li class="fl" :class="bottomtab==1 ? 'li_choose' : ''" @click="bottomChange(1)"><a href="javascript:;">机</a></li>
              <li class="fl" :class="bottomtab==2 ? 'li_choose' : ''" @click="bottomChange(2)"><a href="javascript:;">料</a></li>
              <li class="fl" :class="bottomtab==3 ? 'li_choose' : ''" @click="bottomChange(3)"><a href="javascript:;">法</a></li>
              <li class="fl" :class="bottomtab==4 ? 'li_choose' : ''" @click="bottomChange(4)"><a href="javascript:;">环</a></li>
            </ul>
          </template>
        </h4>
        <div id="chart_board" :class="bottomtitle!=='' ? 'bg_color_cf' : ''"></div>
      </div>
    </div>
  </div>
</template>

<script>
import navigator from '../components/navigator.vue'
import indexlayer from './page/layer.vue'
import {treeChart} from '../assets/echarts'

export default {
  name: 'index',
  components: {
    navigator,
    indexlayer
  },
  data() {
    return {
      processStep: 1,   // 当前正在执行哪一步（0 = 左侧执行，1 = 右侧执行，2 = 全部完成）
      processState: 1,   // 当前状态（1 = 绿色闪烁，0 = 默认/不闪烁，备用）
      toptab: '',
      bottomtitle: '',
      bottomtab: 0,
      // visible
      indexlayervisible: false
    }
  },
  methods: {
    getBgClass(index) {
      // 当前正在执行的设备
      if (this.processStep === index && this.processState === 1) {
        return 'process_state1'  // 绿色闪烁
      }

      // 执行完成的设备
      if (this.processStep > index) {
        return 'process_state2'  // 蓝色表示已完成
      }

      // 默认灰色背景
      return ''
    },
    changeTab (data, index, file) {
      this.toptab = index
      this.bottomtab = file
      this.bottomtitle = data

      this.$http.get('/public/mock/0/'+index+'/'+file+'.json').then((res) => {
        let data = res.data

        treeChart('chart_board', data.data)
      })
    },
    bottomChange (file) {
      this.bottomtab = file

      this.$http.get('/public/mock/0/'+this.toptab+'/'+file+'.json').then((res) => {
        let data = res.data

        treeChart('chart_board', data.data)
      })
    }
  }
}
</script>

<style lang="less">
#index {
  width: 100%;
  height: 100%;
  background: url('/public/images/bg.png') no-repeat;
  background-size: 100% 100%;
  overflow: hidden;

  > .index_body {
    width: calc(100% - 24px);
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    overflow-y: auto;

    h4 {
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-size: 15px;
      font-weight: normal;
      color: #fff;
    }

    > .jgx_line {
      width: calc(100% - 560px);
      overflow: hidden;
      margin: 24px auto 0;

      > div {
        width: 200px;
        height: 272px;

        img {
          width: 100%;
          height: calc(100% - 32px - 30px);
          background-color: rgba(0, 0, 0, 0.4);
          border: 1px solid #ccc;
          display: block;
        }

        p {
          width: 100%;
          height: 32px;
          text-align: center;
          line-height: 32px;
          color: #fff;
          font-size: 14px;
          background-color: rgba(0, 0, 0, 0.4);
          border: 1px solid #ccc;
          border-top: none;
        }

        > ul.clearfix{
          width: 112px;
          margin: 0 auto;

          > li.fl{
            width: 56px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            color: #fff;
            font-size: 14px;
            border: 1px solid #ccc;
            border-top: none;

            a{
              width: 56px;
              height: 30px;
              color: #fff;
              display: block;
            }
          }
          > li.toptabchoose{
            background-color: #409eff;
          }
        }
      }

      .process_state2 {
        background-color: rgba(64, 158, 255, 0.6);
      }

      > .line {
        width: calc(100% - 400px - 32px);
        height: 0;
        border: 1px solid #fff;
        position: relative;

        > i {
          color: #fff;
          position: absolute;
          font-size: 24px;
          top: -12px;
          right: -8px;
        }
      }
    }

    > .bottom_board{
      width: 100%;
      height: calc(100% - 272px - 40px - 16px - 28px);
      margin: 16px auto 0;

      > h4{
        width: 100%;
        height: 32px;
        border-bottom: 1px solid #fff;

        span{
          height: 32px;
          line-height: 32px;
          border-bottom: 1px solid #fff;
        }

        > ul{
          height: 32px;
          border-bottom: 1px solid #fff;

          > li.fl{
            height: 32px;
            line-height: 32px;
            padding: 0 16px;

            a{
              color: #fff;
            }
          }

          > li.li_choose{
            border-bottom: 2px solid #409eff;
            a{
              font-weight: bold;
              color: #409eff;
            }
          }
        }
      }

      > div{
        width: 100%;
        height: calc(100% - 33px);
      }
    }
  }

  .process_state1 {
    animation: blinkBg 2s infinite;
  }
  @keyframes blinkBg {
    0%   { background-color: green; }
    50%  { background-color: rgba(0, 0, 0, 0.4); }
    100% { background-color: green; }
  }
}
</style>
